<template>
  <div class="board-column">
    <div v-if="headerText" :style="'background-color:'+headerColor" class="board-column-header">
      {{ headerText }}
    </div>
    <draggable
      v-if="pluginType==='agent'"
      :list="list"
      v-bind="$attrs"
      :set-data="setData"
      class="board-column-content"
      @change="onChange">
      <div v-for="element in list" :key="element.id" style="width: 100%;">
        <div v-if="element.id===1 && element.status===1" class="board-banner">
          <el-carousel :interval="2000" height="214px" arrow="always">
            <el-carousel-item v-for="item in element.bannerList" :key="item.id">
              <img :src="item.url" style="height: 214px;width: 100%;background-color: #606060">
            </el-carousel-item>
          </el-carousel>
        </div>

        <div v-else-if="element.id===2 && element.status===1" class="board-news">
          <i class="el-icon-bell"/> 这是最新的公告~
        </div>

        <div v-else-if="element.id===3 && element.status===1">
          <div class="board-plugin">插件模块</div>
          <Kanban :key="2" :list="element['plugUnitList']" :mode="pluginMode" group="menu" class="kanban todo"
                  style="padding-bottom: 10px;" @change="pluginChange"/>
        </div>

        <div v-else-if="element.status===1" class="board-item">
          <img src="@/assets/model.png" class="board-item-icon">
          <label class="board-item-label">{{ element.name }}</label>
        </div>
      </div>
    </draggable>

    <draggable
      v-if="pluginType==='staff'"
      :list="list"
      v-bind="$attrs"
      :set-data="setData"
      class="board-column-content"
      @change="pluginChange">
      <div v-for="element in list" :key="element.id" style="width: 100%;">
        <div v-if="element.display" :style="'border-color:'+headerColor" class="staff-board-item">
          <img :src="element.icon?element.icon:defaultIcon" class="staff-board-item-icon">
          <div class="staff-board-item-content flex-1">
            <div class="staff-board-item-label">{{ element['new_name'] || element.label }}</div>
            <label class="staff-board-item-remarks">点击进入{{ element['new_name'] || element.label }}中心</label>
          </div>
          <img src="@/assets/enter.png" class="staff-board-item-icon-enter">
        </div>
      </div>
    </draggable>
    <div class="board-column-footer">
      <Tabbar :list="tabbar" @change="tabbarChange"/>
    </div>
  </div>
</template>
<script>
import draggable from 'vuedraggable';
import Kanban from '@/components/Kanban';
import Tabbar from '@/components/Tabbar';
import defaultIcon from '@/assets/model.png';

export default {
  name: 'DragKanbanDemo',
  components: {
    draggable,
    Kanban,
    Tabbar
  },
  props: {
    headerText: {
      type: String,
      default: ''
    },
    headerColor: {
      type: String,
      default: ''
    },
    pluginMode: {
      type: Number,
      default: 1
    },
    options: {
      type: Object,
      default() {
        return {};
      }
    },
    list: {
      type: Array,
      default() {
        return [];
      }
    },
    tabbar: {
      type: Array,
      default() {
        return [];
      }
    },
    pluginType: {
      type: String,
      default: 'common'
    }
  },
  data() {
    return {
      defaultIcon: defaultIcon
    }
  },
  methods: {
    setData(dataTransfer) {
      // to avoid Firefox bug
      // Detail see : https://github.com/RubaXa/Sortable/issues/1012
      dataTransfer.setData('Text', '');
    },
    onChange() {
      this.$emit('change');
    },
    pluginChange() {
      this.$emit('pluginChange');
    },
    tabbarChange() {
      this.$emit('tabbarChange');
    }
  }
}
</script>

<style lang="scss" scoped>
.board-column {
  width: 375px;
  /*min-height: 667px;*/
  background: #f0f0f0;
  border-radius: 3px;
  border: 1px solid #f1f2f3;

  .board-column-header {
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    padding: 0 20px;
    text-align: center;
    background: #333;
    color: #f1f2f3;
    border-radius: 3px 3px 0 0;
  }

  .board-column-content {
    /*height: 600px;*/
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 0; //滚动条的宽度
    }
    min-height: 60px;
    display: flex;
    flex-direction: column;
    /*align-items: center;*/
    flex-wrap: wrap;

    .board-item {
       cursor: pointer;
       width: 100%;
       height: 125px;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       background-color: #fff;
       text-align: center;
       box-sizing: border-box;
       margin-bottom: 10px;
     }

    .board-banner{
      cursor: pointer;
      width: 100%;
      height: 214px;
      background-color: #fff;
      text-align: center;
    }

    .board-news{
      cursor: pointer;
      width: 100%;
      height: 45px;
      line-height: 45px;
      background-color: #fff;
      padding: 0 16px;
      margin-bottom: 10px;
    }

    .board-plugin{
      height: 40px;
      line-height: 40px;
      padding: 0 20px;
      background-color: white;
    }

    .board-item-icon {
      width: 44px;
      height: 44px;
      margin-bottom: 10px;
    }

    .board-item-label {
      color: #101010;
      font-size: 14px;
    }

    .staff-board-item:last-child{
      margin-bottom: 16px;
    }

    .staff-board-item{
      margin: 16px 16px 0 16px;
      padding: 16px;
      border: 1.5px solid #18bc9c;
      border-radius: 8px;
      background-color: white;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,.2);
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      .staff-board-item-content{
        height: 90px;
        .staff-board-item-label {
          font-size: 18px;
          color: #434343;
          padding: 20px 0 15px 0;
        }

        .staff-board-item-remarks {
          font-size: 13px;
          color: #b7b7b7;
        }
      }
      .staff-board-item-icon {
        height: 80px;
        width: 80px;
        border-radius: 8px;
        margin-right: 16px;
      }

      .staff-board-item-icon-enter {
        width: 20px;
        height: 20px;
      }
    }
  }
  .board-column-footer{
    position: absolute;
    bottom: 0;
  }
}
</style>

